<template>
    <div class="main-box">
        <div class="select-bar">
            <el-row>
                <el-col :span="22">
                    <el-input v-model="queryName"></el-input>
                </el-col>
                <el-col :span="2">
                    <el-button style="width:105px" @click="handleQuery" type="primary">搜索</el-button>
                </el-col>
            </el-row>
        </div>
        <div class="table-box">

            <el-table :data="tableData" style="width: 100%" height="600">
                <!-- 用户ID -->
                <el-table-column prop="plId" label="编号" width="180"> </el-table-column>

                <!-- 用户昵称 -->
                <el-table-column prop="plName" label="平台名称" width="180"> </el-table-column>

                <!-- 团队名称 -->
                <el-table-column prop="industry" label="行业" width="auto"> </el-table-column>

                <!-- 总投放量 -->

                <el-table-column prop="count" label="总投放量" width="200">

                </el-table-column>
                <!-- 操作 -->
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button @click="showinfo(scope.row)" type="primary" size="small" plain>查&nbsp;&nbsp;看</el-button>
                        <el-button @click="dropUser(scope.row)" type="danger" size="small" plain>注&nbsp;&nbsp;销</el-button>
                    </template>
                </el-table-column>

            </el-table>
        </div>
        <el-drawer :visible.sync="drawer" :with-header="false" :append-to-body="true">
            <div class="plateinfo-drawer">
                <p class="title">用户详情</p>
                <p class="lable">官方logo</p>
                <div class="avatarr">
                    <img :src="selected.avatar" alt="">
                </div>
                <p class="lable">所属平台</p>
                <el-input v-model="selected.plId" disabled></el-input>
                <p class="lable">行业</p>
                <el-input v-model="selected.industry" disabled></el-input>
                <p class="lable">规模</p>
                <el-input v-model="selected.sale" disabled></el-input>
                <p class="lable">用途</p>
                <el-input v-model="selected.useTo" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }"
                    disabled></el-input>

            </div>
        </el-drawer>
    </div>
</template>

<script>
import LOCAL from '@/main'
import API from "@/utils/request";
export default {
    data() {
        return {
            LOCAL,
            selected: { plId: '123456', plName: '张三', useTo: '技术部', count: '1000' },
            queryName:"",
            drawer: false,
            tableData: [
                { plId: '123456', plName: '张三', industry: '哈啰出行', sale: '1000~2000', using: '提供非常便捷的共享服务', avatar: '/img/mine/def_img.jpg', useTo: '技术部', count: '1000' },
                { plId: '123456', plName: '张三', industry: '哈啰出行', sale: '1000~2000', using: '提供非常便捷的共享服务', avatar: '/img/mine/def_img.jpg', useTo: '技术部', count: '1000' },
            ]
        }
    },
    methods: {
        dropUser(data) {
            console.log(data);
            this.$confirm('此操作将永久删除' + data.plName + ', 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        loadData(){
          API.getPlatformInfo({name: this.queryName},(res)=>{
              console.log(res,">>>>>>>>>>>>>>>>>>加载数据结果")
              if(res.code === 200){
                  this.tableData = res.data;
              }
          })  
        },
        showinfo(data) {
            this.drawer = true;
            this.tableData.forEach(element => {
                if (element.plId == data.plId) {
                    this.selected = element;
                }
            });
            console.log(data);

        },
        handleQuery(){
            this.loadData();
        }
    },
    mounted() {
        LOCAL.MAIN_ACTION_INDEX = 3;
        LOCAL.CHI = true;
        LOCAL.TITLE_INFO = "平台管理";
        this.loadData();
    }
}
</script>

<style scoped>
.select-bar {
    margin: 20px;

}

.plateinfo-drawer {
    margin: 30px;
}

.plateinfo-drawer .title {
    font-weight: 500;
    font-size: 18px;
}

.plateinfo-drawer .lable {
    /*margin-bottom: 10px;*/
    font-weight: 100;
    font-size: 18px;
    color: #b5b5b5;
}

.plateinfo-drawer .avatarr img {
    width: 120px;
    height: 120px;
    border-radius: 10px;

}

.table-box {
    margin: 20px;
}
</style>